<!--
 * @Description: 新人首单立减设置页面
 * @Author: liyujie
 * @Date: 2021/05/24
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/05/24
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    立减设置
                </div>
            </div>
            <div class="tips-view">
                功能说明：APP新客首单立减是针对从未在APP下过单的用户，一类是APP的新注册用户，另一类是已经注册的老用户，但是只在H5页面下单购买，未在APP下单购买过商品。
            </div>
            <!-- /header -->
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="187px"
            >
                <div class="form-wrapper">
                    <div class="form-title">
                        <el-form-item
                            label="商品立减设置"
                            label-width="110px"
                            class="is-required is-title no-bottom"
                        >
                            <el-radio-group
                                v-model="ruleForm.status"
                                @change="$refs.ruleForm.clearValidate()"
                            >
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="form-content">
                        <el-form-item
                            label="APP首笔支付金额大于"
                            prop="discount_require_money"
                        >
                            <el-input
                                v-model="ruleForm.discount_require_money"
                                size="medium"
                                placeholder="请输入金额"
                                style="width: 284px"
                                :disabled="!ruleForm.status"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >元</span>
                            </el-input>
                            <span
                                class="form-item-tips"
                                style="color: #333;font-size: 14px"
                            >
                                可享随机立减优惠
                            </span>
                        </el-form-item>
                        <el-form-item
                            label="今日预算峰值"
                            prop="budget_today"
                        >
                            <el-input
                                v-model="ruleForm.budget_today"
                                size="medium"
                                placeholder="请输入今日预算峰值"
                                style="width: 284px"
                                :disabled="!ruleForm.status"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >元</span>
                            </el-input>
                            <span class="form-item-tips">*立减优惠今日支出金额限制</span>
                        </el-form-item>
                        <el-form-item
                            label="明日预算峰值"
                            prop="budget_tomorrow"
                        >
                            <el-input
                                v-model="ruleForm.budget_tomorrow"
                                size="medium"
                                placeholder="请输入明日预算峰值"
                                style="width: 284px"
                                :disabled="!ruleForm.status"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >元</span>
                            </el-input>
                            <span class="form-item-tips">*立减优惠明日支出金额限制，时间过了当天凌晨24点，明日预算峰值数据变为今日预算峰值数据，明日预算峰值数据默认显示和今日预算峰值数据设置相同；</span>
                        </el-form-item>
                        <el-form-item label="可参与立减的商品类型">
                            <div class="types-wrapper">
                                <el-checkbox-group
                                    v-model="ruleForm.valid_goods_types"
                                    :disabled="!ruleForm.status"
                                    @change="handleTypesChange"
                                >
                                    <el-popover
                                        placement="bottom-start"
                                        width="368"
                                        trigger="hover"
                                        popper-class="goods-type-popover"
                                    >
                                        <el-checkbox :label="1">普通商品</el-checkbox>
                                        <el-checkbox :label="8">虚拟商品</el-checkbox>
                                        <el-checkbox
                                            :label="9"
                                            disabled
                                        >付费优惠券</el-checkbox>
                                        <el-checkbox
                                            style="margin-right: 24px"
                                            :label="99"
                                            slot="reference"
                                            @change="handleCheckAllChange"
                                        >
                                            团购商品
                                        </el-checkbox>
                                    </el-popover>
                                    <el-checkbox :label="5">折扣商品</el-checkbox>
                                    <el-checkbox
                                        :label="3"
                                        disabled
                                    >秒杀商品</el-checkbox>
                                    <el-checkbox
                                        :label="6"
                                        disabled
                                    >0元购商品</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                        <el-form-item label="不参与立减优惠的商品">
                            <div
                                class="select-btn"
                                :class="ruleForm.status ? '' : 'disabled'"
                                @click="showGoodsDialog"
                            >
                                {{ ruleForm.invalid_goods.length ? '重新选择' :'选择商品' }}
                            </div>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.invalid_goods.length">
                            <div class="table-view">
                                <el-table
                                    :data="pageData"
                                    :row-style="{height: '95px'}"
                                    style="width: 598px"
                                    class="goods-select-table-view"
                                >
                                    <el-table-column width="20"/>
                                    <el-table-column label="商品信息">
                                        <template slot-scope="scope">
                                            <div class="goods-view">
                                                <div class="goods-view-image">
                                                    <el-image
                                                        :src="scope.row.goods_cover"
                                                        @click="showPreview(scope.row.goods_cover)"
                                                    >
                                                        <div
                                                            slot="error"
                                                            class="image-slot"
                                                        >
                                                            <i class="el-icon-picture-outline"/>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="goods-view-info">
                                                    <div class="goods-view-info__title">
                                                        {{ scope.row.goods_title }}</div>
                                                    <div class="goods-view-info__other">
                                                        <span class="goods-view-info__price">￥{{ scope.row.goods_price }}</span>
                                                        <span class="goods-view-info__stock">库存：{{ scope.row.goods_stock }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="操作"
                                        width="60"
                                    >
                                        <template slot-scope="scope">
                                            <el-button
                                                type="text"
                                                :disabled="!ruleForm.status"
                                                @click="deleteGoods(scope.row)"
                                            >删除</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="20"/>
                                </el-table>
                                <div class="table-footer">
                                    <div>
                                        已选商品<span class="count">（{{ ruleForm.invalid_goods.length }}）</span>
                                    </div>
                                    <div class="pagination">
                                        <el-pagination
                                            layout="prev, pager, next"
                                            :current-page.sync="page.now_page"
                                            :total="page.total_count"
                                            :page-size="page.page_size"
                                            @current-change="getPageData"
                                        />
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="优惠叠加">
                            <el-checkbox-group
                                v-model="ruleForm.valid_discount_types"
                                :disabled="!ruleForm.status"
                            >
                                <el-row>
                                    <el-checkbox :label="1">商家优惠券</el-checkbox>
                                    <el-checkbox :label="2">商家满减</el-checkbox>
                                    <el-checkbox
                                        :label="99"
                                        disabled
                                    >
                                        商家团购价
                                    </el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox :label="3">平台优惠券</el-checkbox>
                                    <el-checkbox :label="4">平台红包</el-checkbox>
                                    <el-checkbox :label="8">一卡通折扣</el-checkbox>
                                    <el-checkbox
                                        :label="98"
                                        disabled
                                    >一卡通1分钱商品专区</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox :label="5">新人专区</el-checkbox>
                                    <el-checkbox
                                        :label="6"
                                        style="margin-left: 14px"
                                    >倒计食</el-checkbox>
                                    <el-checkbox
                                        :label="7"
                                        style="margin-left: 14px"
                                    >平台大促</el-checkbox>
                                </el-row>
                            </el-checkbox-group>
                        </el-form-item>
                        <!--<el-form-item label="活动规则说明">
                            <el-input
                                v-model="ruleForm.desc"
                                type="textarea"
                                placeholder="请输入活动规则说明"
                                :autosize="{ minRows: 4}"
                                style="width: 975px;"
                                maxlength="100"
                                show-word-limit
                            />
                        </el-form-item>-->
                        <el-form-item
                            label="立减规则设置"
                            class="is-required"
                        >
                            <div class="rules-view">
                                <div
                                    class="rules-item"
                                    v-for="(item, index) in ruleForm.discount_rule"
                                    :key="index"
                                >
                                    <div class="rules-item-col">
                                        · 单笔支付有
                                        <el-form-item
                                            :prop="`discount_rule[${index}].rate`"
                                            :rules="rules.rate"
                                            class="error-offset"
                                        >
                                            <el-input
                                                v-model="item.rate"
                                                size="medium"
                                                placeholder="请输入概率"
                                                style="width: 144px"
                                                :disabled="!ruleForm.status"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >%</span>
                                            </el-input>
                                        </el-form-item>
                                        概率
                                    </div>
                                    <div class="rules-item-col">
                                        立减金额在
                                        <el-form-item
                                            :prop="`discount_rule[${index}].discount_money_min`"
                                            :rules="rules.discount_money_min"
                                            class="error-offset"
                                        >
                                            <el-input
                                                v-model="item.discount_money_min"
                                                size="medium"
                                                placeholder="请输入..."
                                                style="width: 144px"
                                                :disabled="!ruleForm.status"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                            至
                                        </el-form-item>
                                        <el-form-item
                                            :prop="`discount_rule[${index}].discount_money_max`"
                                            :rules="rules.discount_money_max"
                                            class="error-offset"
                                        >
                                            <el-input
                                                v-model="item.discount_money_max"
                                                size="medium"
                                                placeholder="请输入..."
                                                style="width: 144px"
                                                :disabled="!ruleForm.status"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                            之间
                                        </el-form-item>
                                    </div>
                                    <el-button
                                        type="text"
                                        :disabled="ruleForm.discount_rule.length === 1 || !ruleForm.status"
                                        @click="deleteRulesItem(index)"
                                    >删除</el-button>
                                </div>
                                <div
                                    class="add-btn"
                                    :class="ruleForm.status ? '' : 'disabled'"
                                    @click="addRulesItem"
                                >
                                    <i class="el-icon-plus"/>
                                    继续添加
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div class="operating-view">
                <el-button
                    size="medium"
                    @click="$router.go(-1)"
                >
                    取消
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :loading="loading"
                    @click="handleSubmit"
                >
                    提交
                </el-button>
            </div>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
        <!--商品选择弹窗-->
        <goods-select
            ref="goodsSelect"
            :params="{goods_types}"
            @change="handleSelectGoods"
        />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import { deepClone } from "@/assets/js/utils";
import ImgPreview from "@/components/common/img-preview";
import GoodsSelect from '@/components/goods/goods-select-old';
// 多奖励任务奖励设置模型
const rulesItemModel = {
    // 概率
    rate: '',
    // 立减金额
    discount_money_min: '',
    discount_money_max: ''
};
const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;

export default {
    name: 'FirstOrderDiscountSettings',
    mixins: [back],
    components: {ImgPreview, GoodsSelect},
    data() {
        return {
            type: 'add',
            ruleForm: {
                // 启用状态
                status: 1,
                // 支付最低金额
                discount_require_money: '',
                // 今日预算
                budget_today: '',
                // 明日预算
                budget_tomorrow: '',
                // 不参与的商品
                invalid_goods: [],
                // 启用的商品类型
                valid_goods_types: [],
                // 优惠叠加
                valid_discount_types: [],
                discount_rule: [deepClone(rulesItemModel)]
            },
            rules: {
                discount_require_money: [
                    {required: true, message: '请输入首笔支付金额', trigger: 'blur'},
                    {pattern: numberReg, message: '金额必须为数字且保留两位小数', trigger: 'blur'},
                ],
                budget_today: [
                    {required: true, message: '请输入今日预算峰值', trigger: 'blur'},
                    {pattern: numberReg, message: '预算峰值必须为数字且保留两位小数', trigger: 'blur'},
                ],
                budget_tomorrow: [
                    {required: true, message: '请输入明日预算峰值', trigger: 'blur'},
                    {pattern: numberReg, message: '预算峰值必须为数字且保留两位小数', trigger: 'blur'},
                ],
                rate: [
                    {required: true, message: '请输入概率', trigger: 'blur'},
                    {pattern: numberReg, message: '概率必须为数字', trigger: 'blur'},
                ],
                discount_money_min: [
                    {required: true, message: '请输入金额', trigger: 'blur'},
                    {pattern: numberReg, message: '金额必须为数字且保留两位小数', trigger: 'blur'},
                ],
                discount_money_max: [
                    {required: true, message: '请输入金额', trigger: 'blur'},
                    {pattern: numberReg, message: '金额必须为数字且保留两位小数', trigger: 'blur'},
                ],
            },
            pageData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            loading: false,
            requestUrl: '/student/shop_new_user_discount%5Cget_goods_for_select',
            typeList: [
                {label: '自营', value: 1},
                {label: '折扣', value: 5}
            ],
            authResult: {}
        };
    },
    computed: {
        goods_types() {
            let valid_goods_types = deepClone(this.ruleForm.valid_goods_types);

            if(valid_goods_types.indexOf(99) !== -1) {
                valid_goods_types.splice(valid_goods_types.indexOf(99), 1);
            }
            return valid_goods_types.join();
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 页面初始化
         */
        init() {
            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, { title: '新客首单立减' }, { title: '立减设置' }]);
            this.authResult = this.$route.meta.authResult;
            this.getDetailData();
        },


        /**
         * @description 获取数据
         */
        getDetailData() {
            this.loading = true;
            let params = {};

            this.$post('/student/shop_new_user_discount%5Cget_config', params, res => {
                if (res.code === 1) {
                    let data = res.data;

                    data.valid_discount_types = data.valid_discount_types.map(item => {
                        return Number(item);
                    });
                    data.valid_goods_types = data.valid_goods_types.map(item => {
                        return Number(item);
                    });
                    if(data.valid_goods_types.includes(1) || data.valid_goods_types.includes(8)) {
                        data.valid_goods_types.push(99);
                    }

                    this.ruleForm = data;
                    this.getPageData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
                this.loading = false;
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        showPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 删除规则
         * @param index
         */
        deleteRulesItem(index) {
            this.ruleForm.discount_rule.splice(index, 1);
        },

        /**
         * 添加规则
         */
        addRulesItem() {
            if(this.ruleForm.discount_rule.length >= 6) {
                this.$message.warning('最多添加6条');
                return;
            }
            this.ruleForm.discount_rule.push(deepClone(rulesItemModel));
        },

        /**
         * 选中团购商品
         */
        handleCheckAllChange(val) {
            if(val) {
                if(this.ruleForm.valid_goods_types.indexOf(1) === -1) {
                    this.ruleForm.valid_goods_types.push(1);
                }
                if(this.ruleForm.valid_goods_types.indexOf(8) === -1) {
                    this.ruleForm.valid_goods_types.push(8);
                }
            } else {
                if(this.ruleForm.valid_goods_types.indexOf(1) !== -1) {
                    this.ruleForm.valid_goods_types.splice(this.ruleForm.valid_goods_types.indexOf(1), 1);
                }
                if(this.ruleForm.valid_goods_types.indexOf(8) !== -1) {
                    this.ruleForm.valid_goods_types.splice(this.ruleForm.valid_goods_types.indexOf(8), 1);
                }
            }
        },

        /**
         * 选中每一种商品类型变化
         */
        handleTypesChange(val) {
            // 全选状态显示
            if((val.includes(1) || val.includes(8)) && this.ruleForm.valid_goods_types.indexOf(99) === -1) {
                this.ruleForm.valid_goods_types.push(99);
            }

            // 取消全选状态显示
            if((!val.includes(1) && !val.includes(8)) && this.ruleForm.valid_goods_types.indexOf(99) !== -1) {
                this.ruleForm.valid_goods_types.splice(this.ruleForm.valid_goods_types.indexOf(99), 1);
            }
        },

        /**
         * @description 提交数据处理
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let params = deepClone(this.ruleForm);
                    // 校验概率和是否为100%
                    let sum = this.ruleForm.discount_rule.reduce((prev, cur) => {
                        return Number(cur.rate) + prev;
                    }, 0);

                    if(sum !== 100) {
                        this.$notify.warning({
                            title: '提示',
                            message: '当前概率合计不等于100%，保存失败'
                        });
                        return;
                    }
                    if(params.valid_goods_types.indexOf(99) !== -1) {
                        params.valid_goods_types.splice(params.valid_goods_types.indexOf(99), 1);
                    }
                    params.invalid_goods_nos = params.invalid_goods.map(item => {
                        return item.goods_no;
                    }).join();
                    params.valid_goods_types = params.valid_goods_types.join();
                    params.valid_discount_types = params.valid_discount_types.join();
                    params.discount_rule_json = JSON.stringify(params.discount_rule);
                    delete params.invalid_goods;
                    delete params.discount_rule;

                    this.$post('/student/shop_new_user_discount%5Cset_config', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.getDetailData();
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                } else {
                    // 校验不通过
                    if(document.getElementsByClassName('el-form-item__error').length > 0){
                        this.$notify.warning({
                            title: '提示',
                            message: document.getElementsByClassName('el-form-item__error')[0].innerText
                        });
                    }
                    return false;
                }
            });
        },

        /**
         * 获取选择商品
         * @param val
         */
        handleSelectGoods(val) {
            this.ruleForm.invalid_goods = deepClone(val);
            this.getPageData();
        },

        /**
         * 删除商品
         * @param row
         */
        deleteGoods(row) {
            this.ruleForm.invalid_goods = this.ruleForm.invalid_goods.filter(item => {
                return item.goods_no !== row.goods_no;
            });
            this.getPageData();
        },

        /**
         * 处理商品分页数据
         */
        getPageData() {
            let data = this.getDataPagination(this.ruleForm.invalid_goods, this.page.now_page, 5);

            this.pageData = data.list;
            this.page.now_page = data.currentPage;
            this.page.total_count = data.total;
            this.page.page_size = data.pageSize;
        },

        /**
         * 显示商品选择弹窗
         */
        showGoodsDialog() {
            this.$refs.goodsSelect.show(2, this.requestUrl, this.typeList);
            if (this.ruleForm.invalid_goods.length) {
                this.$refs.goodsSelect.setData(this.ruleForm.invalid_goods);
            }
        },

        /**
         * @name  getDataPagination
         * @desc  前端分页方法
         * @param  {Number} currentPage 当前页码，默认1
         * @param  {Number} pageSize 每页最多显示条数，默认10
         * @param  {Array} totalData 总的数据集，默认为空数组
         * @return {Object} {
                list, //当前页展示数据，数组
                currentPage, //当前页码
                pageSize, //每页最多显示条数
                total, //总的数据条数
            }
         **/
        getDataPagination (totalData = [], currentPage = 1, pageSize = 10) {
            const { length } = totalData;
            const tableData = {
                list: [],
                currentPage,
                pageSize,
                total: length
            };

            if (pageSize >= length) {
                tableData.list = totalData;
                tableData.currentPage = 1;
            } else {
                const num = pageSize * (currentPage - 1);

                if (num < length) {
                    const startIndex = num;
                    const endIndex = num + pageSize - 1;

                    tableData.list = totalData.filter((_, index) => index >= startIndex && index <= endIndex);
                } else {
                    const size = parseInt(length / pageSize);
                    const rest = length % pageSize;

                    if (rest > 0) {
                        tableData.currentPage = size + 1;
                        tableData.list = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);
                    } else if (rest === 0) {
                        tableData.currentPage = size;
                        tableData.list = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);
                    }
                }
            }
            return tableData;
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        /*header*/

        .header {
            height: 66px;
            padding: 0 32px;
            box-sizing: border-box;
            box-shadow: 0px -1px 0px 0px #F0F2F5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #EBEEF5;

            .header-title {
                color: #333333;
                height: 20px;
                position: relative;
                margin: 24px 0;
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
            }
        }
        .tips-view {
            display: flex;
            align-items: center;
            padding: 12px 24px;
            margin: 16px 32px 0;
            min-height: 42px;
            background: #FFF6D6;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #896C43;
            line-height: 22px;
        }
        .form-wrapper {
            margin: 16px 32px 32px;
            padding: 24px 32px;
            background: #FBFBFB;
            border: 1px solid #EEEEEE;
            .form-title {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
                line-height: 16px;
                padding-bottom: 12px;
                border-bottom: 1px solid #E9E9E9;
                margin-bottom: 24px;
                &-tips {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #C2C2C2;
                    margin-left: 12px;
                }
            }
            .form-content {
                margin-bottom: 32px;
                .table-view {
                    width: 598px;
                    border-radius: 4px;
                    border: 1px solid #DCDFE6;
                    background: #fff;
                    .goods-view {
                        display: flex;
                        align-items: center;
                        &-image {
                            margin-right: 24px;
                            .el-image {
                                width: 62px;
                                height: 62px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 24px;
                                border-radius: 4px;
                                cursor: pointer;
                            }
                        }
                        &-info {
                            display: flex;
                            flex-direction: column;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            &__title {
                                color: #333333;
                                margin-bottom: 12px;
                                width: 400px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            &__price {
                                color: #F53341;
                            }
                            &__stock {
                                color: #999999;
                                margin-left: 24px;
                            }
                        }
                    }
                    .table-footer {
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 24px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        .count {
                            color: #F53341;
                        }
                        .pagination {
                            margin-top: 12px;
                        }
                    }
                }
                .rules-view {
                    width: 975px;
                    padding: 24px 32px;
                    background: #F7F7F7;
                    border-radius: 2px;
                    border: 1px solid #DCDFE6;
                    margin-top: 12px;
                    .rules-item {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin-bottom: 20px;
                        .el-input {
                            margin: 0 12px;
                        }
                        &-col {
                            margin-right: 24px;
                            display: flex;
                        }
                    }
                }
                .add-btn {
                    width: 120px;
                    height: 36px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    border: 1px solid #20A0FF;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #20A0FF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    .el-icon-plus {
                        margin-right: 10px;
                    }
                    &.disabled {
                        color: rgb(153, 153, 153);
                        border: 1px solid rgb(153, 153, 153);
                        pointer-events: none;
                    }
                }
                .select-btn {
                    width: 130px;
                    height: 36px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    border: 1px solid #1890FF;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #1890FF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    &.disabled {
                        color: rgb(153, 153, 153);
                        border: 1px solid rgb(153, 153, 153);
                        pointer-events: none;
                    }
                }
                .form-item-tips {
                    display: inline-block;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 18px;
                    margin-left: 12px;
                    max-width: 530px;
                    vertical-align: middle;
                }
                .types-wrapper {
                    display: flex;
                }
            }
        }
        .operating-view {
            padding: 8px 254px 52px;
            .el-button {
                width: 120px;
                margin-right: 36px;
            }
        }
    }
    /deep/ .el-form {
        .el-form-item.no-bottom{
            margin-bottom: 0;
        }
        .el-form-item.error-offset {
            .el-form-item__error {
                margin-left: 12px;
            }
        }
        .el-form-item__label {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333;
        }
        .is-required {
            .el-form-item__label {
                &:before {
                    content: "*";
                    display: inline-block;
                    color: #FF3030;
                    margin-right: 4px;
                }
            }
        }
        .is-title {
            .el-form-item__label {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
            }
        }
        .el-input-number {
            .el-input__inner {
                text-align: left;
            }
        }
        .el-input__suffix {
            display: flex;
            align-items: center;
        }
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
    /deep/ .el-textarea__inner {
        resize: none;
    }

    .data-table {
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
    }
}
</style>
<style lang="less">
.goods-type-popover {
    background: #F7F7F7;
    border: 1px solid #DCDFE6;
    padding: 12px;
}
.el-table.goods-select-table-view {
    th {
        background: #F5F5F5!important;
    }
    td {
        background: #fff!important;
    }
    &::before {
        background: #F5F5F5!important;
    }
    .el-table__header th {
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
    }
    .el-table__header-wrapper {
        border-bottom: 1px solid #DCDFE6;
    }
}
</style>
